<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>申报商户</title>
    <link rel="stylesheet" href="../../../bangnuo/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../bangnuo/css/operation/add_merchants_new.css">
    <script src="../../../bangnuo/bootstrap/js/jquery-3.4.1.js"></script>
    <script src="../../../bangnuo/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../../bangnuo/vue/vue.js"></script>
    <script src="../../../bangnuo/vue/axios.min.js"></script>
    <script type="module" src="./js/config/public.js"></script>
</head>
<body>
<div id="app">
    <!--布局容器-->
    <div class="container-fluid">
        <!--进度条展示-->
        <div class="row" id="jindu">
            <ul style="display:flex; align-items: center">
                <li class="aline">

                </li>
                <li class="step">
                    <p>基本信息</p>
                </li>
                <li class="aline">
                    <span></span>
                </li>
                <li class="step step-6">
                    <p>结算信息</p>
                </li>
                <li class="aline">
                    <span></span>
                </li>
                <li class="step step-7">
                    <p>店铺信息</p>
                </li>
                <li class="aline">
                    <span></span>
                </li>
                <li class="step step-8">
                    <p>资质信息</p>
                </li>
                <li  class="alineg">
                    <span></span>
                </li>
                <li class="step step-4">
                    <p>上传资质</p>
                </li>
                <li class="alineg">
                    <span></span>
                </li>
                <li class="step step-5">
                    <p>保单完成</p>
                </li>
                <li class="alineg">
                    <span></span>
                </li>
            </ul>
        </div>
        <!--内容头展示-->
        <div class="row jiben-title-text">
            资质信息
        </div>
        <!--内容-->
        <div class="row input-content">
            <div class="container input-container-content">
                <div v-if="form.commercialTenantDetails.incomType==2" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">营业执照号：</span>
                        <input type="text" v-model="form.commercialTenantDetails.busLicNo" class="form-control" placeholder="请输入营业执照号" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div v-if="form.commercialTenantDetails.incomType==2 || form.commercialTenantDetails.incomType==1" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">商户注册名：</span>
                        <input type="text" v-model="form.commercialTenantDetails.bseLiceNm" class="form-control" placeholder="请输入商户注册名" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div v-if="form.commercialTenantDetails.incomType==2 || form.commercialTenantDetails.incomType==1" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">法人姓名：</span>
                        <input type="text" v-model="form.commercialTenantDetails.crpNm" class="form-control" placeholder="请输入法人姓名" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div v-if="form.commercialTenantDetails.incomType==2 || form.commercialTenantDetails.incomType==1" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">法人身份证：</span>
                        <input type="text" v-model="form.commercialTenantDetails.crpIdNo" class="form-control" placeholder="请输入法人身份证" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div v-if="form.commercialTenantDetails.incomType==2 || form.commercialTenantDetails.incomType==1" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">法人起始日期：</span>
                        <input type="date"  v-model="form.commercialTenantDetails.crpEffDt" class="form-control" placeholder="请输入法人起始日期" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div  v-if="form.commercialTenantDetails.incomType==2 || form.commercialTenantDetails.incomType==1"class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">法人身份证有效期：</span>
                        <input type="date"  v-model="form.commercialTenantDetails.crpExpDt" class="form-control" placeholder="请输入法人身份证有效期" aria-describedby="basic-addon1">
                    </div>
                </div>

                <div v-if="form.commercialTenantDetails.incomType==2 || form.commercialTenantDetails.incomType==1" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">营业执照地址：</span>
                        <input type="text" v-model="form.commercialTenantDetails.mercAdds" class="form-control" placeholder="请输入营业执照地址" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div v-if="form.commercialTenantDetails.incomType==2 || form.commercialTenantDetails.incomType==1" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">营业执照起始日期：</span>
                        <input type="date" v-model="form.commercialTenantDetails.busEffDt" class="form-control" placeholder="请输入营业执照起始日期" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div v-if="form.commercialTenantDetails.incomType==2 || form.commercialTenantDetails.incomType==1" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">营业执照有效期：</span>
                        <input type="date" v-model="form.commercialTenantDetails.busExpDt" class="form-control" placeholder="请输入营业执照有效期" aria-describedby="basic-addon1">
                    </div>
                </div>
            </div>
            <div class=" submit-button">
                <button type="button" class="btn btn-primary button-class" @click="breakButton">上一步</button>
                <button type="button" class="btn btn-primary button-class" @click="savaSubmit">保存并继续</button>
            </div>
        </div>
    </div>
</div>
<script type = "module">
    import bnApi from './js/config/public.js';
    var vue = new Vue({
        el: '#app',
        data:{
            id:'',
            code:1,
            prevList:[],
            cityList:[],
            areaList:[],
            mccSupList:[],
            mccTypeList:[],
            mccList:[],
            usernameFlag:false,
            form:{
                commercialTenant: {
                    area: "0",
                    city: "0",
                    companyName: "",
                    createTime: "",
                    email: "",
                    id: "",
                    imageList: "",
                    isDelete: 1,
                    name: "",
                    number: "",
                    phone: "",
                    pid: "",
                    position: "",
                    province: "0",
                    remark: "",
                    status: 0,
                    step: 1,
                    type: 0,
                    userId: "",
                    username: ""
                },
                commercialTenantDetails: {
                    busEffDt:"",
                    stlTyp:"",
                    stlSign:"",
                    merchantsType1:"0",
                    merchantsType2:"0",
                    incomType:"0",
                    alipayFlg: "",
                    bnkAcnm: "",
                    bseLiceNm: "",
                    busExpDt: "",
                    busLicNo: "",
                    commercialTenantId: "",
                    content: "",
                    createTime: "",
                    crpExpDt: "",
                    crpIdNo: "",
                    crpNm: "",
                    id: "",
                    logNo: "",
                    mailbox: "",
                    mccCd: "0",
                    mercAdds: "",
                    mercId: "",
                    status: 0,
                    stlOac: "",
                    stoeAdds: "",
                    stoeAreaCod: "",
                    stoeCntCardid:"",
                    stoeCntNm: "",
                    stoeCntTel: "",
                    stoeId: "",
                    stoeNm: "",
                    trmRec: "",
                    trmScan: "",
                    trmTp: "",
                    updateTime: "",
                    wcLbnkNo: "",
                    yhkpayFlg: "",
                    icrpIdNo:"",
                    crpEndDt:"",
                    crpStartDt:""
                },
                password: "",
                photo: "",
                username: ""
            },
        },
        methods:{
            savaSubmit:function () {
                this.form.commercialTenant.step = 3;
                bnApi.requestPost('/commercial/addNew',this.form).then(res=>{
                    if(res.success){
                        this.id = res.object.id;
                        //进行跳转进入下一步
                        location.href='add_merchants_new4.html?id='+this.id;
                        console.log("this",this);
                    }
                });

            },
            breakButton:function () {
                console.log("执行后退方法")
                location.href = "./add_merchants_new2.html?id="+this.id;
            },
            findById:function () {
                this.id = this.getQueryVariable("id");
                console.log("传过来中的id:",this.id);
                if(this.id == ''){
                    return;
                }
                bnApi.requestGet('/commercial/findByIdNew/'+this.id).then(res=>{
                    if(res.success){
                        //此代码不写，插入可能失败
                        this.form = res.object
                        //营业执照
                        res.object.commercialTenantDetails.busEffDt = res.object.commercialTenantDetails.busEffDt.substr(0,10);
                        res.object.commercialTenantDetails.busExpDt= res.object.commercialTenantDetails.busExpDt.substr(0,10);
                        //法人有效期
                        res.object.commercialTenantDetails.crpEffDt = res.object.commercialTenantDetails.crpEffDt.substr(0,10);
                        res.object.commercialTenantDetails.crpExpDt= res.object.commercialTenantDetails.crpExpDt.substr(0,10);
                        this.form = res.object
                    }
                });
            },
            getQueryVariable:function (variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            },
            //添加节点
            addButton(index){
                let shop = {
                    name:'',
                    address:''
                };
                this.shops.push(shop);
            },
            //删除节点
            deleteButton(index){
                console.log("index",index);
                this.shops.splice(index,1);
            }
        },
        mounted(){
            this.id = this.getQueryVariable("id");
            console.log("this.id",this.id)
            this.findById();
        }
    });
</script>
</body>
</html>